<script setup name="materialSource">
import {
  getInventorySummaryListAPI,
  getInventoryMaterialDetailedAPI,
  getInventoryAccessoriesDetailedAPI,
  getInventoryFinishProductDetailedAPI,
  getInventoryMaterialHalfDetailedAPI,
  getInventoryWasteDetailedAPI,
  getlistAPI,
  selectCodingRulesByIdListAPI
} from '@/api/statement/inventoryTotal/inventoryTotal'

import { GetTypeSelectAPI } from '@/api/material/common'
const { proxy } = getCurrentInstance()
// 其他出库 字典查询
const {
  quality_category, // 库存汇总类别
  wms_stock_info_freeze_info // 库存汇总冻结标识
} = proxy.useDict('quality_category', 'wms_stock_info_freeze_info')
const activeName = ref('库存汇总') //tabs默认页面
const state = reactive({
  loading: false, // 表格加载状态
  total: 0, //分页
  ids: 0
})
const typeSelect = ref([])
const option = ref([])
const Material = ref([])
const marData = ref([]) //库存汇总表格
const qualityData = ref([]) //原料明细表格
const batchData = ref([]) //辅料明细表格
const finishData = ref([]) //成品明细表格
const semiFinishData = ref([]) //半成品明细表格
const wasteData = ref([]) //废料明细表格

const SelectFormRef = ref(null)
// 查询条件
const SelectList = ref([
  { type: '日期范围' },
  { label: '类别', model: 'wsiCategory', type: '下拉单选', opt: quality_category, isGo: true },
  { label: '物料类别', model: 'wsiMaterialType', type: '下拉单选', opt: typeSelect },
  { label: '物料编码', model: 'wsiMaterialCode', type: '输入框' },
  { label: '物料名称', model: 'wsiMaterialName', type: '输入框' },
  { label: '物料号码', model: 'wsiMaterialNumber', type: '输入框' },
  {
    label: '仓库',
    model: 'warehouseIds',
    type: '树结构下拉',
    opt: option,
    config: {
      value: 'id',
      label: 'warehouseName',
      children: 'children'
    }
  },
  { label: '仓库单据号', model: 'wsiDocNum', type: '输入框' },
  { label: '关联单号', model: 'wsiConnectNum', type: '输入框' },
  { label: '冻结标志', model: 'wsiFreezeInfo', type: '下拉单选', opt: wms_stock_info_freeze_info },
  { label: '规格型号', model: 'specType', type: '输入框' }
])

// 查询条件 分页
const query = reactive({
  pageNum: 1,
  pageSize: 50
})

// 查询
const selectSubmit = obj => {
  for (let key in obj) {
    query[key] = obj[key]
  }
  initGetList()
}

// 获取物料类别
const SelectChange = async val => {
  const res = await GetTypeSelectAPI({ condingId: val })
  typeSelect.value = res.theDrop
  SelectFormRef.value.Form.wsiMaterialType = ''
}

// 库存汇总列表
const getMarDataList = async () => {
  try {
    state.loading = true
    const res = await getInventorySummaryListAPI(query)
    marData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}
// getMarDataList()
// 原料明细列表
const getQualityList = async () => {
  try {
    state.loading = true
    const res = await getInventoryMaterialDetailedAPI(query)

    marData.value = res.rows
    // qualityData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}

// 辅料明细列表
const getBatchDataList = async () => {
  try {
    state.loading = true
    const res = await getInventoryAccessoriesDetailedAPI(query)
    marData.value = res.rows
    // batchData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}

// 成品明细列表
const getfinishList = async () => {
  try {
    state.loading = true
    const res = await getInventoryFinishProductDetailedAPI(query)
    marData.value = res.rows
    // finishData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}

// 半成品明细列表
const getsemiFinishList = async () => {
  try {
    state.loading = true
    const res = await getInventoryMaterialHalfDetailedAPI(query)
    marData.value = res.rows
    // semiFinishData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}

// 废料明细列表
const getWasteList = async () => {
  try {
    state.loading = true
    const res = await getInventoryWasteDetailedAPI(query)
    marData.value = res.rows
    // wasteData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}

// 仓库列表模糊查询接口
const getlist = async () => {
  const res = await getlistAPI()
  // console.log(res, '====')
  option.value = res.data
}
getlist()

// 物料类别模糊查询接口
const selectCodingRulesByIdList = async () => {
  const res = await selectCodingRulesByIdListAPI({ id: state.ids })
  Material.value = res.data
}

// 判断实现层
const initGetList = () => {
  if (activeName.value == '库存汇总') {
    getMarDataList()
  } else if (activeName.value == '原料明细') {
    getQualityList()
  } else if (activeName.value == '辅料明细') {
    getBatchDataList()
  } else if (activeName.value == '成品明细') {
    getfinishList()
  } else if (activeName.value == '半成品明细') {
    getsemiFinishList()
  } else {
    getWasteList()
  }
}
// initGetList()

watch(
  () => activeName.value,
  () => {
    initGetList()
  },
  {
    deep: true,
    immediate: true
  }
)

const tableHeight = ref(0)

const maxHeight = computed(() => {
  const windowHeight = window.innerHeight
  const headerHeight = 400
  const paginationHeight = 0
  return windowHeight - headerHeight - paginationHeight
})

const handleResize = () => {
  tableHeight.value = maxHeight.value
}

onMounted(() => {
  tableHeight.value = maxHeight.value
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <SelectForm
      ref="SelectFormRef"
      :SelectForm="SelectList"
      @SelectChange="SelectChange"
      @selectSubmit="selectSubmit"
    />
    <el-card>
      <el-radio-group style="margin-bottom: 20px" v-model="activeName" class="demo-tabs">
        <el-radio-button label="库存汇总">库存汇总</el-radio-button>
        <el-radio-button label="原料明细">原料明细</el-radio-button>
        <el-radio-button label="辅料明细">辅料明细</el-radio-button>
        <el-radio-button label="成品明细">成品明细</el-radio-button>
        <el-radio-button label="半成品明细">半成品明细</el-radio-button>
        <el-radio-button label="废料明细">废料明细</el-radio-button>
      </el-radio-group>
      <!-- 库存汇总表格 -->
      <el-table
        v-loading="state.loading"
        :height="maxHeight"
        stripe
        border
        :data="marData"
        v-if="activeName == '库存汇总'"
      >
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="类别" prop="wsiCategoryDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="物料类别" prop="materialTypeDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="物料编码" prop="materialCode" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="物料名称" prop="materialName" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specType" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="标签数量" prop="wsiMaterialNum" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="物料数量 " prop="materialWeight" width="auto" align="center" show-overflow-tooltip />
      </el-table>

      <!-- 原料明细表格 -->
      <el-table
        v-loading="state.loading"
        :height="maxHeight"
        stripe
        border
        :data="marData"
        v-else-if="activeName == '原料明细'"
      >
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="物料号码" prop="wsiMaterialNumber" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="库存状态"
          prop="wsiMaterialStatusDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="物料等级"
          prop="wsiMaterialGradeDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="物料编码" prop="wsiMaterialCode" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料名称" prop="wsiMaterialName" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specType" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料类别" prop="materialTypeDict" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="批次" prop="wsiMaterialBatch" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="数量" prop="wsiNetWeight" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="单位" prop="materialUnit" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库" prop="wsiWarehourseDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库区" prop="wsiReservoirAreaDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库位" prop="wsiStorageLoactionDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="冻结标志" prop="wsiFreezeInfo" width="auto" align="center" show-overflow-tooltip>
          <template #default="scope">
            <p-switch clearable v-model="scope.row.wsiFreezeInfo" disabled />
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="supplierName" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库关联单号" prop="wsiDocNum" width="160" align="center" show-overflow-tooltip />
        <el-table-column label="关联单号" prop="wsiConnectNum" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="生产日期" prop="wsiProducedDate" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="入库时间" prop="wsiReveiveTime" width="auto" align="center" show-overflow-tooltip />
      </el-table>

      <!-- 辅料明细表格 -->
      <el-table
        v-loading="state.loading"
        :height="maxHeight"
        stripe
        border
        :data="marData"
        v-else-if="activeName == '辅料明细'"
      >
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="物料号码" prop="wsiMaterialNumber" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="库存状态"
          prop="wsiMaterialStatusDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="物料等级"
          prop="wsiMaterialGradeDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="物料编码" prop="wsiMaterialCode" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料名称" prop="wsiMaterialName" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specType" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料类别" prop="wsiMaterialType" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="批次" prop="wsiMaterialBatch" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="数量" prop="wsiNetWeight" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="单位" prop="materialUnit" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库" prop="wsiWarehourseDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库区" prop="wsiReservoirAreaDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库位" prop="wsiStorageLoactionDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="冻结标志" prop="wsiFreezeInfo" width="auto" align="center" show-overflow-tooltip>
          <template #default="scope">
            <p-switch clearable v-model="scope.row.wsiFreezeInfo" disabled />
          </template>
        </el-table-column>
        <el-table-column label="供应商编码" prop="wsiSupplierCode" width="120" align="center" show-overflow-tooltip />
        <el-table-column label="供应商名称" prop="supplieName" width="120" align="center" show-overflow-tooltip />
        <el-table-column label="仓库关联单号" prop="wsiDocNum" width="160" align="center" show-overflow-tooltip />
        <el-table-column label="关联单号" prop="wsiConnectNum" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="生产日期" prop="wsiProducedDate" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="入库时间" prop="wsiReveiveTime" width="auto" align="center" show-overflow-tooltip />
      </el-table>

      <!-- 成品明细表格 -->
      <el-table
        v-loading="state.loading"
        :height="maxHeight"
        stripe
        border
        :data="marData"
        v-else-if="activeName == '成品明细'"
      >
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="物料号码" prop="wsiMaterialNumber" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="库存状态"
          prop="wsiMaterialStatusDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="物料等级"
          prop="wsiMaterialGradeDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="物料编码" prop="wsiMaterialCode" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料名称" prop="wsiMaterialName" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specType" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料类别" prop="materialTypeDict" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="生产阶别"
          prop="wsiProducedStepDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="批次" prop="wsiMaterialBatch" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="数量" prop="wsiNetWeight" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="单位" prop="materialUnit" width="auto" align="center" show-overflow-tooltip />

        <el-table-column label="仓库" prop="wsiWarehourseDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库区" prop="wsiReservoirAreaDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库位" prop="wsiStorageLoactionDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="冻结标志" prop="wsiFreezeInfo" width="auto" align="center" show-overflow-tooltip>
          <template #default="scope">
            <p-switch clearable v-model="scope.row.wsiFreezeInfo" disabled />
          </template>
        </el-table-column>
        <el-table-column label="客户编码" prop="wsiCustomCode" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="客户名称" prop="customerName" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库关联单号" prop="wsiDocNum" width="160" align="center" show-overflow-tooltip />
        <el-table-column label="关联单号" prop="wsiConnectNum" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="生产日期" prop="wsiProducedDate" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="入库时间" prop="wsiReveiveTime" width="auto" align="center" show-overflow-tooltip />
      </el-table>

      <!-- 半成品明细表格 -->
      <el-table
        v-loading="state.loading"
        :height="maxHeight"
        stripe
        border
        :data="marData"
        v-else-if="activeName == '半成品明细'"
      >
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="物料号码" prop="wsiMaterialNumber" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="库存状态"
          prop="wsiMaterialStatusDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="物料等级"
          prop="wsiMaterialGradeDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="物料编码" prop="wsiMaterialCode" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料名称" prop="wsiMaterialName" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specType" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料类别" prop="materialTypeDict" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="生产阶别"
          prop="wsiProducedStepDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="批次" prop="wsiMaterialBatch" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="数量" prop="wsiNetWeight" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="单位" prop="materialUnit" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库" prop="wsiWarehourseDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库区" prop="wsiReservoirAreaDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库位" prop="wsiStorageLoactionDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="冻结标志" prop="wsiFreezeInfo" width="auto" align="center" show-overflow-tooltip>
          <template #default="scope">
            <p-switch clearable v-model="scope.row.wsiFreezeInfo" disabled />
          </template>
        </el-table-column>
        <el-table-column label="仓库关联单号" prop="wsiDocNum" width="160" align="center" show-overflow-tooltip />
        <el-table-column label="关联单号" prop="wsiConnectNum" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="生产日期" prop="wsiProducedDate" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="入库时间" prop="wsiReveiveTime" width="auto" align="center" show-overflow-tooltip />
      </el-table>

      <!-- 废料明细表格 -->
      <el-table v-loading="state.loading" :height="maxHeight" stripe border :data="marData" v-else>
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="物料号码" prop="wsiMaterialNumber" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="库存状态"
          prop="wsiMaterialStatusDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="物料编码" prop="wsiMaterialCode" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料名称" prop="wsiMaterialName" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specType" width="220" align="center" show-overflow-tooltip />
        <el-table-column label="物料类别" prop="materialTypeDict" width="220" align="center" show-overflow-tooltip />
        <el-table-column
          label="生产阶别"
          prop="wsiProducedStepDict"
          width="auto"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="数量" prop="wsiNetWeight" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="单位" prop="materialUnit" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库" prop="wsiWarehourseDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库区" prop="wsiReservoirAreaDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="库位" prop="wsiStorageLoactionDict" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="仓库关联单号" prop="wsiDocNum" width="160" align="center" show-overflow-tooltip />
        <el-table-column label="关联单号" prop="wsiConnectNum" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="生产日期" prop="wsiProducedDate" width="auto" align="center" show-overflow-tooltip />
        <el-table-column label="入库时间" prop="wsiReveiveTime" width="auto" align="center" show-overflow-tooltip />
      </el-table>

      <pagination
        v-show="state.total > 0"
        :total="state.total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="initGetList"
      />
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.btnmp {
  margin-bottom: 20px;
}
.app {
  margin-bottom: 20px;
}
.app ::v-deep .el-form-item__label {
  width: 140px;
}
.app ::v-deep .el-input {
  width: 195px;
}
</style>
